import React, { Component } from 'react'
import My from "./My.module.scss"
// 引入轮播图组件
import { Carousel } from 'antd-mobile';
// 引入登录注册、获取验证码的接口数据
import { getPhoneYzm, getLoginRequest } from '../../myaxios/myaxios'

export default class App extends Component {
  state = {
    // 轮播图数据、图片高度
    data: ['1', '2', '3'],
    imgHeight: '1.4rem',
    // 登录注册页转换判断
    login: false,
    style: "active2",
    // 获取输入框手机号
    phone: '',
    loginYzm: '',
    // 登录后切换签到
    LoginInto: 'login',
    // 页面跳回
    gotro: 'gotro',
    // 设置localstorage 的电话和密码
    telphone: '12345678900',
    password: '111111', 
    // 获取输入框密码
    password2:'',
  }
  // 运行轮播图
  componentDidMount() {
    // simulate img loading
    setTimeout(() => {
      this.setState({
        data: ['https://open-cdn.zhongan.com/dm-instrument/images/uqvn09zpkz19lgseoxa4dax1ghqpgin7a5zx22xa.2%E5%85%83%E5%88%86%E6%9C%9F%E4%BA%A7%E5%93%81%E6%8E%A8%E8%8D%902.png',
          'https://open-cdn.zhongan.com/dm-instrument/images/1eeusoqrevbghnkrypgurlgww18ssug29x0rmseo.1%E7%99%BE%E4%B8%87%E9%98%B2%E7%99%8C_APP%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%ADbanner_690x142.png',
          'https://open-cdn.zhongan.com/dm-instrument/images/euxvlpoi3jljonvrmcqazenug2hpjlzdvz9m8imx.%E5%85%AC%E4%BC%97%E5%8F%B7MGM690142.png',],
      });
    }, 1000);
    // 页面跳回
    // var gotro = localStorage.getItem('gotro')
    // if (gotro) {
    //   gotro = gotro - 0 + 1
    // } else {
    //   gotro = 1
    // }
    localStorage.setItem('gotro', this.state.gotro);
    // if (gotro % 2 == 1) {
    //     // console.log(gotro);
    //     // window.location.href = "https://wx.zhongan.com/gp/83347393?bizOrigin=MBAIDUPZ#quitGuide"
    // } else {
    //     window.history.back()
    // }
    if (this.state.gotro != 'gotro') {
      window.history.back();
    }
    // 设置localstorage 的电话和密码
    localStorage.setItem('phone',this.state.telphone)
    localStorage.setItem('password',this.state.password)
    console.log(localStorage.phone);
  }
  // 点击改变login值，显示登录注册页
  handleClick = (params) => {
    // console.log(12);
    this.setState({
      login: true,
    })
  }
  // 点击改变login值，隐藏登录注册页
  handleShowNone = (params) => {
    this.setState({
      login: false,
    })
  }
  // 改变style值、切换登录注册
  handleChangeTab = (e) => {
    this.setState({
      style: e.target.getAttribute('type'),
    })
    // console.log(e.target.getAttribute('type'));
  }
  // 点击获取验证码
  handleYzm = () => {
    // console.log(this.state.phone);
    // let phonenum = this.state.phone
    let param = "phone=" + this.state.phone + "&checkUser=true"
    getPhoneYzm(param).then((res) => {
      // let result = JSON.parse(res.config.data)
      console.log(res);
    })
  }
  // 提交手机号进行注册
  handleSubmit = () => {
    let params = "bizOrigin=MBAIDUPZ&phone=" + this.state.phone + "&smsCode=" + this.state.loginYzm
    getLoginRequest(params).then((res) => {
      if (res.data.isSuccess) {
        this.setState({
          login: false,
          LoginInto: 'loginInto',
        })
      } else {
        this.setState({
          login: true,
        })
      }
      console.log(res.data.isSuccess)
    })
  }
  // 失去焦点时，获取输入的手机号、验证码、密码
  inpValue = (e) => {
    this.setState({
      phone: e.target.value
    })
  }
  inpValueYzm = (e) => {
    this.setState({
      loginYzm: e.target.value
    })
  }
  inpPassword=(e) => {
    this.setState({
      password2:e.target.value
    })
  }
  passwordLogin = () => {
    // var telphone = localStorage.getItem('phone')
    // var password = localStorage.getItem('password')
    // console.log(telphone);
    // var arrtel = telphone.split(',')
    // console.log(arrtel);
    if (this.state.phone == localStorage.phone && this.state.password2 == localStorage.password) {
      this.setState({
        LoginInto: 'loginInto',
        login: false,
      }) 
    }
  }

  render() {
    return (
      <div className={My.appMy}>

        {/* login1 begin */}
        <div className={this.state.login ? My.MyLogin1 + ' ' + My.show : My.MyLogin1}></div>
        {/* login begin */}
        <div className={this.state.login ? My.MyLogin + ' ' + My.show : My.MyLogin}>
          <div className={My.showLogin}>
            <div className={My.title}>
              <div type="active1" onClick={this.handleChangeTab} className={this.state.style === "active1" ? My.active : ''}>密码登录</div>
              <div type="active2" onClick={this.handleChangeTab} className={this.state.style === "active2" ? My.active : ''}>注册/登录</div>
            </div>
            <div className={this.state.style === 'active1' ? My.show1 : My.show1 + ' ' + My.showNone}>
              <input type="text" maxLength="18" onBlur={this.inpValue} autoComplete="off" placeholder="请输入手机号/用户名/身份证号" />
              <i className={My.underline}></i>
              <input type="password" onBlur={this.inpPassword} autoComplete="off" placeholder="请输入密码" />
              <i className={My.underline}></i>
              <div className={My.but} onClick={this.passwordLogin}>立即登录</div>
            </div>
            <div className={this.state.style === 'active2' ? My.show2 : My.show2 + ' ' + My.showNone}>
              <input type="tel" maxLength="11" onBlur={this.inpValue} autoComplete="off" placeholder="请输入手机号" />
              <i className={My.underline}></i>
              <div className={My.yzm}>
                <input type="password" onBlur={this.inpValueYzm} autoComplete="off" placeholder="请输入验证码" /><span onClick={this.handleYzm} className={My.MySpan}>发送验证码</span>
              </div>
              <i className={My.underline}></i>
              <div onClick={this.handleSubmit} className={My.but}>注册/登录</div>
            </div>
          </div>

          <div className={My.clean} onClick={this.handleShowNone}>
            <span className={My.cleanSpan + ' ' + "iconfont"}>&#xe65f;</span>
          </div>
        </div>
        {/* header begin */}
        <div className={My.MyHeader}>
          <img alt="" src="https://m.zhongan.com/my/assets/images/common/default.png" onClick={this.handleClick} />
          <div className={this.state.LoginInto == 'login' ? My.login : My.loginNone} onClick={this.handleClick}>
            <div className={My.loginTo}>
              {`登录/注册 >`}
            </div>
            <div className={My.pFont}>登录享受更多特权与服务</div>
          </div>
          <div className={this.state.LoginInto == 'loginInto' ? My.loginInto : My.loginNone}>
            <div className={My.telphone}>{this.state.phone.slice(0, 3)}****{this.state.phone.slice(7, 11)}</div>
            <div className={My.qiandao}><a href="https://m.zhongan.com/gp/83548305?cid=10002542174&templateType=B&bizOrigin=MBAIDUPZ">签到</a></div>
          </div>
        </div>
        {/* nav begin */}
        <div className={My.MyNavs}>
          <div className={My.baodan}>
            <img alt="" src="https://open-cdn.zhongan.com/dm-instrument/images/xlx2y3ybulygkqnqnblb9eahzmsnbbmiosesfuyt.png" />
            <a href="https://m.zhongan.com/gp/83548305?cid=10002542174&templateType=B&bizOrigin=MBAIDUPZ">保单</a>
          </div>
          <div className={My.lipei}>
            <img alt="" src="https://open-cdn.zhongan.com/dm-instrument/images/epill0zryijwjfboivsexntovkv0uojxkreuonhd.png" />
            <a href="https://m.zhongan.com/gp/83548305?cid=10002542174&templateType=B&bizOrigin=MBAIDUPZ">理赔</a>
          </div>
          <div className={My.baoxianka}>
            <img alt="" src="https://open-cdn.zhongan.com/dm-instrument/images/mowqcuoseqmq8xt3ynh7eopyceh12snp64oifjlc.png" />
            <a herf="https://m.zhongan.com/gp/83548305?cid=10002542174&templateType=B&bizOrigin=MBAIDUPZ">保险卡</a>
          </div>
        </div>
        {/* 优惠活动 begin */}
        <div className={My.youhuiServe}>
          <Carousel
            autoplay={true}
            infinite
          >
            {this.state.data.map(val => (
              <a
                key={val}
                href="https://m.zhongan.com/gp/83548305?cid=10002542174&templateType=B&bizOrigin=MBAIDUPZ"
                style={{ display: 'inline-block', width: '100%', margin: '0 auto', height: '1.7rem', height: this.state.imgHeight }}
              >
                <img
                  src={val}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'middle' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </div>
        {/* serve begin */}
        <div className={My.MyServe1}>
          <a href="https://m.zhongan.com/gp/83548305?cid=10002542174&templateType=B&bizOrigin=MBAIDUPZ"><img alt="" src="https://open-cdn.zhongan.com/dm-instrument/images/xvstqvdgz50gmsntpnyljzbjng4pxzyosnjuc3ss.png" /><span>保单查询</span></a>
          <span className={My.line}></span>
          <a href="https://m.zhongan.com/gp/83548305?cid=10002542174&templateType=B&bizOrigin=MBAIDUPZ"><img src="https://open-cdn.zhongan.com/dm-instrument/images/te2mosbwlfqnp8xtx49jgoqlmwucbf6nzgranfde.png" /><span>团险理赔</span></a>
        </div>
        <div className={My.MyServe1}>
          <a href="https://m.zhongan.com/gp/83548305?cid=10002542174&templateType=B&bizOrigin=MBAIDUPZ"><img alt="" src="https://open-cdn.zhongan.com/dm-instrument/images/fnjt5ngprhj7qllzfew2xemvvk3h3ql8xuudataj.png" /><span>意见反馈</span></a>
          <span className={My.line}></span>
          <a href="https://m.zhongan.com/gp/83548305?cid=10002542174&templateType=B&bizOrigin=MBAIDUPZ"><img alt="" src="https://open-cdn.zhongan.com/dm-instrument/images/jq444l8forclww2swsvlro1tpphnelvl2b1zh1vd.png" /><span>关于众安</span></a>
          <span className={My.line}></span>
          <a href="https://m.zhongan.com/gp/83548305?cid=10002542174&templateType=B&bizOrigin=MBAIDUPZ"><img alt="" src="https://open-cdn.zhongan.com/dm-instrument/images/xk3nuzkly7ljshfawau91jomeeyqs0qv0vmhydek.png" /><span>下载APP</span></a>
        </div>
        {/* tel begin */}
        <div className={My.tel}>
          客服电话<span>&nbsp;1010-9955</span>
        </div>
      </div>
    )
  }
}
